<template>
  <div class="app-container menu-container">
    <FormLayout>ww</FormLayout>
    <ContentLayout>
      <div class="menu-btn">
        <el-button type="primary" @click="handleEdit()"
          ><el-icon><Plus /></el-icon> 新增</el-button
        >
      </div>
      <CustomBaseTable :tableConfig="menuTableConfig" :tableData="tableDate">
        <template v-slot:operation="scope">
          <div class="table-operation">
            <el-button
              type="primary"
              size="small"
              text
              @click="handleEdit(scope.data, 'add')"
              ><el-icon><Plus /></el-icon> 新增</el-button
            >
            <el-button
              type="primary"
              size="small"
              text
              @click="handleEdit(scope.data, 'edit')"
              ><el-icon><EditPen /></el-icon>编辑</el-button
            >
            <el-button
              type="danger"
              size="small"
              text
              @click="deleteRow(scope.data)"
              ><el-icon><Delete /></el-icon>删除</el-button
            >
          </div>
        </template>
      </CustomBaseTable>
    </ContentLayout>
    <EditMenu
      v-model="showEditMenu"
      v-model:title="menuTitle"
      :currentRow="currentRow"
      @updateList="menuStore.getMenuListRequest()"
      :currentType="currentTydpe"
    ></EditMenu>
  </div>
</template>

<script setup lang="ts">
import { useMenuStore } from "@/store/index";
import { menuTableConfig } from "@/config/menu";

const tableDate = ref<any>([]);
const showEditMenu = ref<boolean>(false);
const menuTitle = ref<string>("新增菜单");
const menuStore = useMenuStore();
const currentRow = ref<any>(null);
const currentType = ref<string>("");
onMounted(() => {
  menuStore.getMenuListRequest();
});
watch(
  () => menuStore.menuList,
  (newValue) => {
    tableDate.value = newValue;
    console.log(newValue);
  }
);
const handleEdit = (data?: any, type?: string) => {
  currentRow.value = data || null;
  currentType.value = type || "";
  showEditMenu.value = true;
};
const deleteRow = (row: any) => {
  // 二次确认是否删除
  ElMessageBox.confirm("确定要删除吗？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    menuStore.menuDelete({
      id: row.id,
      callback: () => {
        menuStore.getMenuListRequest();
      },
    });
  });
};
</script>

<style lang="scss" scoped>
.menu-container {
  .menu-btn {
    margin-bottom: 8px;
  }
}
</style>
